<template>
    <div class="container">
        <div class="toptitle">
            <div class="titletext">智能机器</div>
            <hr />
        </div>
        <div class="content">
            <div class="left">
                <!-- 在左侧加载地图 -->
                <MAP :longitude="longitude" :latitude="latitude" :zoom="16.5" style="margin-left: 10px;width: 99%;height: 99%;" />
            </div>
            <div class="right">
                <div class="title">当前机器作业</div>
                <ul class="all">
                    <li>作业时长：0分0秒</li>
                    <li>作业路程：0米</li>
                    <li>作业面积：0亩</li>
                    <li>最后作业时间：--</li>
                </ul>
            </div>
        </div>
        
    </div>
</template>

<script setup>
import MAP from '@/components/GPS/components/Satellite/index.vue'; // 引入地图组件
import { ref } from 'vue';
import useOperationStore from '../../../../../store/operation';
import { ElTable, ElTableColumn } from "element-plus";

// 切换业务的数据对接处理
let operationStore = useOperationStore();
let operationId = ref(operationStore.data.length > 0 ? operationStore.data[operationStore.index].id : '');
let latitude = ref(operationStore.data.length > 0 ? operationStore.data[operationStore.index].latitude : null);
let longitude = ref(operationStore.data.length > 0 ? operationStore.data[operationStore.index].longitude : null);
let operationName = ref(operationStore.data.length > 0 ? operationStore.data[operationStore.index].Name : null);
let videoPlayer = ref(null); // video player reference for controlling playback
let showPopup = ref(false); // Popup visibility

operationStore.$subscribe(async (mutation, state) => {
    operationId.value = operationStore.data[operationStore.index].id;
    operationName.value = operationStore.data.length > 0 ? operationStore.data[operationStore.index].Name : null;
    latitude.value = operationStore.data.length > 0 ? operationStore.data[operationStore.index].latitude : null;
    longitude.value = operationStore.data.length > 0 ? operationStore.data[operationStore.index].longitude : null;
});

</script>

<style lang="scss" scoped>
.container {
    flex: 1;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .toptitle {
        margin-top: 10px;
        margin-left: 20px;
        margin-right: 20px;

        .titletext {
            border-left: 3px solid var(--primary-color);
            padding-left: 20px;
        }

        hr {
            background-color: rgb(194, 194, 194);
            height: 1px;
            border: none;
        }
    }

    .content {
        display: flex;
        flex: 1;
        justify-content: space-between;

        .left {
            width: 75%;
            height: 100%;
            border-radius: 8px;
            position: relative;
        }

        .right {
            .title {
                margin: 10px;
                font-size: 22px;
                text-align: center;
            }
            .all {
                padding: 0;
                margin: 5px;
                font-size: 20px;
                color: rgb(112, 112, 112);
                li {
                    margin-bottom: 7px;
                }
            }
            flex: 1;
            width: 30%;
            height: 100%;
            // margin-left: 10px;
            border-radius: 5px;
        }
    }
    ul li {
        list-style: none;
    }


}
</style>
